<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="/shop/include :: header"></head>
<body>
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
	<ul class="layui-tab-title">
		<li class="layui-this" lay-id="0">商品基本设置</li>
		<li lay-id="1">商品详情设置</li>
		<li lay-id="2">商品属性设置</li>
		<li lay-id="3">售卖规则设置</li>
	</ul>
	<div class="layui-tab-content">
		<div class="layui-tab-item layui-show">
			<form class="layui-form" action="" lay-filter="shop_supply_goods-add-form" style="margin-top: 20px;">
				<input type="hidden" name="id" th:value="${shopSupplyGoods.id}">
				<!--  -->
				<div style="display:flex;">
					<!--  -->
					<div class="layui-form-item" style="display: contents">
						<label class="layui-form-label">商品主图：</label>
						<div class="layui-upload-list" id="test1">
							<img class="layui-upload-img" id="demo1" th:src="${shopSupplyGoods.mainFigure}" style="width: 190px;height: 190px">
							<input type="hidden" name="mainFigure" id="mainFigure" th:value="${shopSupplyGoods.mainFigure}">
						</div>
					</div>
					<div style="width: 73%">
						<!--  -->
						<div class="layui-form-item">
							<label class="layui-form-label">供应商：</label>
							<div class="layui-input-block">
								<select name="supplyId" id="supplyId" autocomplete="off"
										placeholder="请选择供应商" th:data="${shopSupplyGoods.supplyId}"
										class="layui-input">
								</select>
							</div>
						</div>
						<!--  -->
						<div class="layui-form-item">
							<label class="layui-form-label">类别ID：</label>
							<div class="layui-input-block">
								<div id="categoryId" class="xm-select-demo" style="width: 594px"></div>
								<input id="category" type="hidden" th:value="${shopSupplyGoods.categoryId}">
							</div>
						</div>
						<!--  -->
						<div class="layui-form-item">
							<label class="layui-form-label">列表标题：</label>
							<div class="layui-input-block">
								<input id="goodsListTitle" name="goodsListTitle" placeholder="请输入商品列表页标题"
									   class="layui-input" lay-verify="required" autocomplete="off" th:value="${shopSupplyGoods.goodsListTitle}">
							</div>
						</div>
						<!--  -->
						<div class="layui-form-item">
							<label class="layui-form-label">单价：</label>
							<div class="layui-input-block">
								<input id="unitPrice" name="unitPrice" placeholder="请输入单价"
									   class="layui-input" lay-verify="required" autocomplete="off" th:value="${shopSupplyGoods.unitPrice}">
							</div>
						</div>
					</div>
				</div>
				<!--  -->
				<div class="layui-form-item">
					<label class="layui-form-label">最低拿货量：</label>
					<div class="layui-input-block">
						<input id="minimumSize" name="minimumSize" placeholder="请输入最低拿货量"
							   class="layui-input" lay-verify="required" autocomplete="off" th:value="${shopSupplyGoods.minimumSize}">
					</div>
				</div>
				<!--  -->
				<div id="bioarea-wrap">
					<div class="layui-form-item">
						<label class="layui-form-label">发货地-省：</label>
						<div class="layui-input-block">
							<select style="width: 100px;" class="level-1-select" lay-filter="#bioarea-wrap1level"
									name="deliveryProvince">
								<option value="">请选择省</option>
							</select>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">发货地-市：</label>
						<div class="layui-input-block">
							<select class="level-2-select" lay-filter="#bioarea-wrap2level" name="deliveryCity">
								<option value="">请选择市</option>
							</select>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">发货地-区：</label>
						<div class="layui-input-block">
							<select class="level-3-select" lay-filter="#bioarea-wrap3level" name="deliveryArea">
								<option value="">请选择市</option>
							</select>
						</div>
					</div>
				</div>
				<!--  -->
				<div class="layui-form-item">
					<label class="layui-form-label">发货地-详细地址：</label>
					<div class="layui-input-block">
						<input id="deliveryAddress" name="deliveryAddress" placeholder="详细地址"
							   class="layui-input" lay-verify="required" autocomplete="off" th:value="${shopSupplyGoods.deliveryAddress}">
					</div>
				</div>
				<!--  -->
				<div class="layui-form-item">
					<label class="layui-form-label">是否包邮：</label>
					<div class="layui-input-block">
						<select name="isPackageMail" id="isPackageMail" lay-filter="isPackageMail" th:data="${shopSupplyGoods.isPackageMail}">
						</select>
					</div>
				</div>
				<!--  -->
				<div class="layui-form-item">
					<label class="layui-form-label">商品状态：</label>
					<div class="layui-input-block">
						<select name="goodsState" id="goodsState" lay-filter="goodsState" th:data="${shopSupplyGoods.goodsState}">
						</select>
					</div>
				</div>
				<!--  -->
				<div class="layui-form-item" id="storeIds" style="display: none">
					<label class="layui-form-label">店铺：</label>
					<div class="layui-input-block">
						<select name="storeId" id="storeId" lay-filter="storeId">
						</select>
					</div>
				</div>
				<!--  -->
				<div class="layui-form-item">
					<label class="layui-form-label">推荐状态：</label>
					<div class="layui-input-block">
						<select name="recommendedState" id="recommendedState" lay-filter="recommendedState" th:data="${shopSupplyGoods.recommendedState}">
						</select>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">处理状态：</label>
					<div class="layui-input-block">
						<select name="applyState" id="applyState" lay-filter="applyState" th:data="${shopSupplyGoods.applyState}">
						</select>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">平台回复：</label>
					<div class="layui-input-block">
						<textarea id="platformReply" name="platformReply" th:text="${shopSupplyGoods.platformReply}"></textarea>
					</div>
				</div>
				<div class="layui-form-item" style="text-align: center">
					<div class="layui-input-block">
						<button class="layui-btn" lay-submit="" lay-filter="shop_supply_goods-edit">立即提交</button>
					</div>
				</div>
			</form>
		</div>
		<div class="layui-tab-item">
			<form class="layui-form" action="" lay-filter="shop_supply_goods_detail-add-form" style="margin-top: 20px;">
				<input type="hidden" id="id" name="id">
				<!--  -->
				<div class="layui-form-item">
					<label class="layui-form-label">商品轮播图：</label>
					<div class="layui-upload-list" style="display: flex">
						<div class="layui-input-inline">
							<ul id="uploadImg">
								<li style="position: relative;margin-top: 12px">
                                    <span class="layui-upload-list layui-icon" id="addZmImg">
                                        &#xe64a;
                                    </span>
								</li>
							</ul>
							<ul id="imgZmList">

							</ul>
							<div id="cropperdiv"></div>
						</div>
					</div>
				</div>
				<!--  -->
				<div class="layui-form-item">
					<label class="layui-form-label">商品编码：</label>
					<div class="layui-input-block">
						<input id="goodsCode" name="goodsCode" placeholder="请输入商品编码"
							   class="layui-input" lay-verify="required" autocomplete="off" th:value="${shopSupplyGoods.goodsCode}" readonly>
					</div>
				</div>
				<!--  -->
				<div class="layui-form-item">
					<label class="layui-form-label">标题：</label>
					<div class="layui-input-block">
						<input id="title" name="title" placeholder="请输入标题"
							   class="layui-input" lay-verify="required" autocomplete="off">
					</div>
				</div>
				<!--  -->
				<div class="layui-form-item">
					<label class="layui-form-label">商品详情：</label>
					<div class="layui-input-block">
						<textarea id="detail" name="detail"></textarea>
					</div>
				</div>
				<div class="layui-form-item" style="text-align: center">
					<div class="layui-input-block">
						<button class="layui-btn" lay-submit="" lay-filter="shop_supply_goods_detail-edit">立即提交</button>
					</div>
				</div>
			</form>
		</div>
		<div class="layui-tab-item">
			<iframe id="warehouse" th:src="'/platform/page/supply_goods_warehouse/list?goodsCode='+${shopSupplyGoods.goodsCode}+'&supplyId='+${shopSupplyGoods.supplyId}" frameborder="0" class="layadmin-iframe"
					style="margin-top: 51px"></iframe>
		</div>
		<div class="layui-tab-item">
			<iframe id="rule" th:src="'/platform/page/supply_goods_rule/list?goodsCode='+${shopSupplyGoods.goodsCode}+'&supplyId='+${shopSupplyGoods.supplyId}" frameborder="0" class="layadmin-iframe"
					style="margin-top: 51px"></iframe>
		</div>
	</div>
</div>
<div th:include="/shop/include::footer"></div>
<script src="../../../layuiadmin/modules/xmSelect.js"></script>
<script type="text/javascript" src="../../../layuiadmin/publish/js/move.js"></script>
<script type="text/javascript" src="../../../layuiadmin/publish/js/publishImg.js"></script>
<script src="https://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="../../../layuiadmin/publish/js/jquery.dragsort-0.5.2.min.js"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script type="text/javascript">
	$("#imgZmList").dragsort({
		dragSelector: "div",
		dragBetween: true,
		dragEnd: saveOrder,
		placeHolderTemplate: "<li class='placeHolder'><div></div></li>"
	});

	function saveOrder() {
		var data = $("#imgZmList li").map(function () {
			return $(this).children().html();
		}).get();
	};
</script>
<script>
	layui.config({
		base: '../../../layuiadmin/layui/lay/modules/'
	}).extend({
		bioarea: 'bioarea'
	});
</script>
<script>
	layui.use(['layer', 'jquery', 'form', 'laydate', "bioarea", 'dict', 'upload', "layedit", "element"], async function () {
		var $ = layui.jquery;
		var laydate = layui.laydate;
		var layer = layui.layer;
		var form = layui.form;
		var dict = layui.dict;
		var upload = layui.upload;
		var bioarea = layui.bioarea;
		var layedit = layui.layedit;
		var element = layui.element;

		dict.setSelect("recommendedState","recommendedState");
		dict.setSelect("isPackageMail","isPackageMail");
		dict.setSelect("goodsState","goodsState");
		dict.setSelect("applyState","applyState");
		['showFolderIcon', 'showLine', 'strict'].forEach(function (key) {
			layui.form.on('checkbox(' + key + ')', function (data) {
				var treeConfig = {};
				treeConfig[key] = data.elem.checked;
				categoryIds.update({
					tree: treeConfig
				})
			});
		})

		bioarea.render({
			elem: '#bioarea-wrap',
			defaultData: {
				provinceCode: String([[${shopSupplyGoods.deliveryProvince}]]),
				cityCode: String([[${shopSupplyGoods.deliveryCity}]]),
				countyCode: String([[${shopSupplyGoods.deliveryArea}]])
			},
			form
		})

		var detail = layedit.build('detail', {
			tool: [
				'strong' //加粗
				, 'italic' //斜体
				, 'underline' //下划线
				, 'del' //删除线

				, '|' //分割线

				, 'left' //左对齐
				, 'center' //居中对齐
				, 'right' //右对齐
				, 'link' //超链接
				, 'unlink' //清除链接
				, 'face' //表情
			]
		}); //建立编辑器
		var platformReply =  layedit.build('platformReply',{
			tool: [
				'strong' //加粗
				,'italic' //斜体
				,'underline' //下划线
				,'del' //删除线

				,'|' //分割线

				,'left' //左对齐
				,'center' //居中对齐
				,'right' //右对齐
				,'link' //超链接
				,'unlink' //清除链接
				,'face' //表情
			]
		}); //建立编辑器
		var categoryId = xmSelect.render({
			el: '#categoryId',
			autoRow: true,
			filterable: true,
			tree: {
				show: true,
				showFolderIcon: true,
				showLine: false,
				indent: 20,
				expandedKeys: [-3],
				strict: false
			},
			toolbar: {
				show: true,
				list: ['ALL', 'REVERSE', 'CLEAR']
			},
			model:{
				icon: 'hidden'
			},
			//处理方式
			on: function(data){
				if(data.isAdd){
					return data.change.slice(0, 1)
				}
			},
			height: 'auto',
			data: []
		})

		$.ajax({
			url: '/platform/goodscategory/selectAllCategory',
			type: "get",
			beforeSend: function (request) {
				request.setRequestHeader(window.sessionStorage.getItem("tokenName"), window.sessionStorage.getItem("platform_token"));
			},
			success: function (result) {
				var categoryIdArr = $("#category").val().split(",");
				var res = result.data;
				var str = "[";
				for (var i = 0; i < res.length; i++) {
					str += "{name: '" + res[i].categoryName + "', value: " + res[i].id + ", children:[";
					for (var l = 0; l < res[i].list.length; l++) {
						str += "{name: '" + res[i].list[l].categoryName + "', value: " + res[i].list[l].id + ", children:[";
						for (var z = 0; z < res[i].list[l].list.length; z++) {
							if (categoryIdArr.indexOf(res[i].list[l].list[z].id + "") >= 0) {
								str += "{name: '" + res[i].list[l].list[z].categoryName + "', value: " + res[i].list[l].list[z].id + ",selected: true, children:[]},";
							}else {
								str += "{name: '" + res[i].list[l].list[z].categoryName + "', value: " + res[i].list[l].list[z].id + ", children:[]},";
							}
						}
						str += "]},"
					}
					str += "]},"
				}
				str += "]";
				categoryId.update({
					data: eval("(" + str + ")")
				})
			},
			error: function (result) {
				layer.msg("查询分类失败")
			}
		});
		$.ajax({
			url: '/platform/supplyinfo/select',
			type: "get",
			beforeSend: function (request) {
				request.setRequestHeader(window.sessionStorage.getItem("tokenName"), window.sessionStorage.getItem("platform_token"));
			},
			success: function (result) {
				if (result.status == "SUCCESS") {
					if (result.data != null) {
						var $html = "";
						$.each(result.data, function (index, item) {
							$html += "<option value='" + item.id + "'>" + item.supplyName + "</option>";
						});
						$("#supplyId").append($html);
						form.render('select');
					}
				} else {
					layer.msg(result.message)
				}
			},
			error: function (result) {
				layer.msg("查询供应商失败")
			}
		});
		$.ajax({
			url: '/platform/supplygoodsdetail/getSupplyGoodsDetailByGoodsCode?goodsCode='+$("#goodsCode").val(),
			type: "get",
			beforeSend: function (request) {
				request.setRequestHeader(window.sessionStorage.getItem("tokenName"), window.sessionStorage.getItem("platform_token"));
			},
			success: function (result) {
				if (result.status == "SUCCESS") {
					var img = result.data.shufflingFigure;
					var imgList = [];
					imgList = img.split(",");
					for (var i = 0; i < imgList.length;i++){
						$('#imgZmList').append('<li style="position:relative"><div>' +
								'<img name="imgZmList" src="' + imgList[i] + '"width="150" height="113" style="margin-top: 8px">' +
								'<div class="img_edit layui-icon" onclick="croppers_pic(this)">&#xe642;</div>' +
								'<div class="img_close" onclick="deleteElement(this)">X</div>' +
								'</li>');
					}
					$("#goodsCode").val(result.data.goodsCode)
					$("#title").val(result.data.title)
					$("#id").val(result.data.id)
					layedit.setContent(detail,result.data.detail);
					form.render();
				}
			},
			error: function (result) {
				layer.msg("查询商品详情失败")
			}
		});

		var uploadInst1 = upload.render({
			elem: '#test1'
			, url: '/platform/UploadFile' //改成您自己的上传接口
			//, headers: {"token": layui.data(layui.setter.tableName)['token']}
			, before: function (obj) {
				//预读本地文件示例，不支持ie8
				obj.preview(function (index, file, result) {
					$('#demo1').attr('src', result); //图片链接（base64）
				});
			}
			, done: function (res) {
				//如果上传失败
				if (res.status != "SUCCESS") {
					return layer.msg('上传失败');
				}
				//上传成功
				layer.msg('上传成功');
				$("#mainFigure").val(res.data)
			}
			, error: function () {
				//演示失败状态，并实现重传
				var demoText = $('#demoText');
				demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
				demoText.find('.demo-reload').on('click', function () {
					uploadInst1.upload();
				});
			}
		});

		upload.render({
			elem: '#addZmImg'
			, url: '/platform/UploadFile'
			, multiple: true
			, accept: "file"
			, before: function (obj) {
				//预读本地文件示例，不支持ie8
				obj.preview(function (index, file, result) {
					$('#imgZmList').append('<li style="position:relative"><div>' +
							'<img name="imgZmList" src="' + result + '"width="150" height="113" style="margin-top: 8px">' +
							'<div class="img_edit layui-icon" onclick="croppers_pic(this)">&#xe642;</div>' +
							'<div class="img_close" onclick="deleteElement(this)">X</div>' +
							'<input type="hidden" id="' + index + '"></div>' +
							'</li>');
					form.render();
				});
			}
			, done: function (res, index) {
				//如果上传失败
				if (res.status != "SUCCESS") {
					return layer.msg('上传失败');
				}
				//上传成功
				$("#" + index).val(res.data)
				layer.msg('上传成功');

			}
		});

		/*监听下拉框*/
		form.on('select(goodsState)', function (dataObj) {
			var goodsState = $("#goodsState").val();
			if (goodsState != 0) {
				$("#storeIds").css('display', 'none');
			}else{
				$("#storeIds").css('display', 'block');
			}
		});

		var goodsState = [[${shopSupplyGoods.goodsState}]]
		if (goodsState != 0) {
			$("#storeIds").css('display', 'none');
		}else{
			$("#storeIds").css('display', 'block');
		}
		$.ajax({
			url: '/platform/userstore/getUserStoreByUserType?userType=0',
			type: "get",
			success: function (result) {
				if (result.status == "SUCCESS") {
					if (result.data != null) {
						var $html = "<option value='0'>请选择</option>";
						$.each(result.data, function (index, item) {
							$html += "<option value='" + item.id + "'>" + item.storeName + "</option>";
						});
						$("#storeId").append($html);
						$("#storeId").val([[${shopSupplyGoods.storeId}]])
						form.render('select');
					}
				} else {
					layer.msg(result.message)
				}
			},
			error: function (result) {
				layer.msg("查询店铺失败")
			}
		});

		//监听提交
		form.on('submit(shop_supply_goods-edit)', function(data) {
			var selectArr = categoryId.getValue('valueStr');
			selectArr = JSON.stringify(selectArr, null, 2);
			selectArr = selectArr.replace(/"/g, "");
			data.field.categoryId = selectArr
			data.field.platformReply = layedit.getContent(platformReply);
			$.ajax({
				url: '/platform/supplygoods/edit',
				type: "post",
				data: JSON.stringify(data.field),
				contentType: 'application/json; charset=utf-8', // 很重要
				async: false,
				beforeSend: function (request) {
					request.setRequestHeader(window.sessionStorage.getItem("tokenName"), window.sessionStorage.getItem("platform_token"));
				},
				success: function (result) {
					if (result.status == "SUCCESS"){
						layer.msg(result.message, {
							offset: '15px'
							, icon: 1
							, time: 1000
						}, function () {
							window.parent.location.reload();
						});
					}else {
						layer.msg(result.message)
					}
				}
			});
			return false;
		});

		//监听提交
		form.on('submit(shop_supply_goods_detail-edit)', function (data) {
			//获取图片url
			var children = $("#imgZmList").find("input");
			var shufflingFigure = "";
			for (var i = 0; i < children.length; i++) {
				if (i < children.length - 1) {
					shufflingFigure += children[i].value + ","
				} else {
					shufflingFigure += children[i].value
				}
			}
			data.field.shufflingFigure = shufflingFigure;
			data.field.detail = layedit.getContent(detail);
			$.ajax({
				url: '/platform/supplygoodsdetail/edit',
				type: "post",
				data: JSON.stringify(data.field),
				contentType: 'application/json; charset=utf-8', // 很重要
				async: false,
				beforeSend: function (request) {
					request.setRequestHeader(window.sessionStorage.getItem("tokenName"), window.sessionStorage.getItem("platform_token"));
				},
				success: function (result) {
					if (result.status == "SUCCESS") {
						layer.msg(result.message, {
							offset: '15px'
							, icon: 1
							, time: 1000
						});
					} else {
						layer.msg(result.message)
					}
				}
			});
			return false;
		});
	});
</script>
</body>
<style>
	.img_close {
		height: 20px;
		background-color: rgba(0, 0, 0, .5);
		position: absolute;
		top: 8px;
		right: 0px;
		width: 20px;
		color: #fff;
		line-height: 18px;
		font-size: 14px;
		text-align: center;
	}

	.img_edit {
		height: 20px;
		background-color: rgba(0, 0, 0, .5);
		position: absolute;
		top: 8px;
		left: 0px;
		width: 20px;
		color: #fff;
		line-height: 18px;
		font-size: 14px;
		text-align: center;
	}

	#addImg, #addZmImg, #addImgdz, #addImgpz, #addImgyy {
		margin-left: 0 !important;
		font-size: 144px;
		line-height: 104px;
		color: darkgrey;
	}

	.layui-input-inline {
		width: 100% !important;
	}

	#imgZmList li, #uploadImg li {
		margin-left: 20px;
		float: left;
		overflow: hidden;
	}
</style>
</html>